<template>
  <div class="box">
    <ul>
        
      <li v-for="(item,name,index) in shopcar" :key="index">
          <div>
             <img :src="item.imgsrc" alt="">
          </div>
          <div class="text">
                <div v-text="item.title"></div>
                <p>￥{{item.price}}</p>
                <div class="btn">
                        <span @click="sub(name)">-</span><input type="text" class="num" v-model="item.num" /><span @click="add(name)">+</span>
                </div>
          </div>
       
      </li>
    </ul>
    <div class="foot">
        <div class="left">
            合计：￥{{allmoney}}
        </div>
        <div class="right">
            去结账：{{allnum}}
        </div>
    </div>
    
  </div>
</template>

<script>
import { mapState, mapMutations, mapGetters } from "vuex";
export default {
  computed: {
    ...mapGetters(["allmoney","allnum"]),
    ...mapState(["shopcar",'money']),
  },
  methods: {
      ...mapMutations(['sub','add'])
  },
};
</script>

<style>
*{
    margin: 0;
    padding: 0;
}
.box{
    width: 400px;
    
    border: 1px solid seagreen;
}
.num {
  width: 20px;
  height: 20px;
  border: none;
  text-indent: 0.5em;
}
.btn > span {
  display: inline-block;
  text-align: center;
  width: 20px;
  height: 20px;
  border: 1px solid gray;
}
ul{
    padding: 20px;
}
li{
    display: flex;
    list-style: none;
    background-color: #f5f5f5;
    margin-top: 15px;
}
img{
    width: 100px;
    padding: 20px 5px;
}
.text{
    width: 175px;
    padding: 10px;
}
.text p{
    margin-top: 10px;
}
.foot{
    line-height: 40px;
    display: flex;
}
.left{
    width: 70%;
    background: #16add3;
}
.right{
    width: 30%;
    background: #ffd700;
}
</style>